// 数据可视化模块
const state = {
  // 数字翻牌器数据
  digitalFlopData: {
    number: [1234],
    content: '{nt}',
    style: {
      fontSize: 36,
      fill: '#00ffff'
    }
  },

  // 排名榜数据
  rankingData: [
    { name: '服务器A', value: 98 },
    { name: '服务器B', value: 95 },
    { name: '服务器C', value: 92 },
    { name: '服务器D', value: 88 },
    { name: '服务器E', value: 85 }
  ],

  // 图表数据
  chartData: {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      itemStyle: {
        color: '#00ffff'
      }
    }]
  },

  // 进度条数据
  progressData: {
    data: [75],
    colors: ['#00ffff', '#ff0000'],
    duration: [3000]
  },

  // 水球图数据
  waterData: {
    data: [75],
    colors: ['#00ffff', '#ff0000'],
    shape: 'roundRect'
  },

  // 百分比环数据
  percentData: {
    data: [75],
    colors: ['#00ffff', '#ff0000'],
    fontSize: 24
  },

  // 数据更新间隔（毫秒）
  updateInterval: 3000,

  // 是否启用实时更新
  realTimeUpdate: true
}

const getters = {
  getDigitalFlopData: state => state.digitalFlopData,
  getRankingData: state => state.rankingData,
  getChartData: state => state.chartData,
  getProgressData: state => state.progressData,
  getWaterData: state => state.waterData,
  getPercentData: state => state.percentData,
  isRealTimeUpdateEnabled: state => state.realTimeUpdate
}

const mutations = {
  // 更新数字翻牌器数据
  UPDATE_DIGITAL_FLOP(state, data) {
    state.digitalFlopData = { ...state.digitalFlopData, ...data }
  },

  // 更新排名榜数据
  UPDATE_RANKING_DATA(state, data) {
    state.rankingData = data
  },

  // 更新图表数据
  UPDATE_CHART_DATA(state, data) {
    state.chartData = { ...state.chartData, ...data }
  },

  // 更新进度条数据
  UPDATE_PROGRESS_DATA(state, data) {
    state.progressData = { ...state.progressData, ...data }
  },

  // 更新水球图数据
  UPDATE_WATER_DATA(state, data) {
    state.waterData = { ...state.waterData, ...data }
  },

  // 更新百分比环数据
  UPDATE_PERCENT_DATA(state, data) {
    state.percentData = { ...state.percentData, ...data }
  },

  // 设置实时更新状态
  SET_REAL_TIME_UPDATE(state, enabled) {
    state.realTimeUpdate = enabled
  },

  // 设置更新间隔
  SET_UPDATE_INTERVAL(state, interval) {
    state.updateInterval = interval
  }
}

const actions = {
  // 初始化数据
  initializeData({ commit }) {
    console.log('初始化数据可视化数据')
    // 这里可以从 API 获取初始数据
  },

  // 更新所有数据
  async updateAllData({ commit, state }) {
    if (!state.realTimeUpdate) return

    try {
      // 模拟异步数据更新
      const newData = await new Promise(resolve => {
        setTimeout(() => {
          resolve({
            digitalFlop: { number: [Math.floor(Math.random() * 2000) + 1000] },
            chart: {
              series: [{
                data: Array.from({ length: 7 }, () => Math.floor(Math.random() * 200) + 50),
                type: 'bar',
                itemStyle: { color: '#00ffff' }
              }]
            },
            progress: { data: [Math.floor(Math.random() * 100)] },
            water: { data: [Math.floor(Math.random() * 100)] },
            percent: { data: [Math.floor(Math.random() * 100)] }
          })
        }, 100)
      })

      commit('UPDATE_DIGITAL_FLOP', newData.digitalFlop)
      commit('UPDATE_CHART_DATA', newData.chart)
      commit('UPDATE_PROGRESS_DATA', newData.progress)
      commit('UPDATE_WATER_DATA', newData.water)
      commit('UPDATE_PERCENT_DATA', newData.percent)

    } catch (error) {
      console.error('更新数据失败:', error)
    }
  },

  // 切换实时更新状态
  toggleRealTimeUpdate({ commit, state }) {
    commit('SET_REAL_TIME_UPDATE', !state.realTimeUpdate)
  },

  // 设置更新间隔
  setUpdateInterval({ commit }, interval) {
    commit('SET_UPDATE_INTERVAL', interval)
  }
}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

